<template>
	<view>
		<nav-box :title="type == 1 ? '签到管理' : '培训管理'"></nav-box>
		<view class="content">
			<view class="list-box">
				<u-collapse hover-class="none" :item-style="itemStyle">
					<u-collapse-item  v-for="(item, index) in list" :key="item.id" :index="index" @change="itemChange">
						<template v-slot:title-all>
							<view class="title-box" style="width: 100%; display: flex; align-items: center; justify-content: space-between;">
								<view class="left-box" style="font-size: 24upx; color: #9d9d9d;">
									<text style="display: block ;font-size: 32upx; color: #4b4b4b; margin-bottom: 8upx;">{{ item.title }}</text>
									<block v-if="type == 1">
										<text style="display: inline-block; margin-right: 20upx;">签到{{item.sign}}人</text>
										<text>总计{{item.count}}人</text>
									</block>
									<block v-else>
										<text>培训状态</text>
									</block>
								</view>
								<image :class="current == index ? 'active' : ''" src="../../../static/images/icon_22.png" mode="" style="width: 32upx; height: 32upx;"></image>
							</view>
						</template>
						<!-- 在这里跳转把当前签到id和type传到下一页 -->
						<navigator :url="`../signDetail/signDetail?id=${item.id}&type=${type}`" hover-class="none">
							<view class="item-body">
								<view class="date-box">
									<text>场次：{{item.sessions}}</text>
								</view>
								<view class="number-box">
									<text>时间：{{item.date}} {{item.startTime}} ~ {{item.endTime}}</text>
								</view>
							</view>
						</navigator>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: null,
			current: null,
			itemStyle: {
				borderBottom: '2upx solid #F1F1F1'
			},
			searchVal: '', // 用户输入的搜索的值
			list: []
		};
	},
	onLoad(options) {
		this.type = options.type
		this.list = [
			{
				id: 1,
				title: this.type == 1 ? '训考1' : '培训1',
				date: '2021/9/01',
				startTime: '13:21',
				endTime: '15:21',
				count: 100, //总计人数
				sign: 30, //签到人数
				sessions: 3, //场次
			},
			{
				id: 2,
				title: this.type == 1 ? '训考2' : '培训2',
				date: '2021/9/01',
				startTime: '13:21',
				endTime: '15:21',
				count: 100, //总计人数
				sign: 30, //签到人数
				sessions: 3, //场次
			}
		];
	},
	methods: {
		searchExam() {
			// 走搜索接口 搜索值为this.searchVal
		},
		itemChange(e) {
			this.current = e.show ?　e.index : null
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	.active {
		transform: rotate(90deg);
		transition: all .3s;
	}
	background-color: #ffffff;
	.content {
		padding: 24upx 40upx;
		.list-box {
			.item-body {
				background-color: #F9FAFB;
				color: #969696;
				font-size: 24upx;
				border-radius: 8upx;
				padding: 24upx;
				margin-bottom: 24upx;
				box-sizing: border-box;
				.date-box {
					margin-bottom: 28upx;
				}
				.number-box {
					text {
						display: inline-block;
					}
				}
			}
		}
	}
}
</style>
